<template>
  <div>


    <!--条件搜索区域-->
    <el-row>
      <el-col :span="24" style="height: 150px;">
        <el-card header="首页">
          <el-form :inline="true">

            <el-form-item label="">
              <el-radio v-model="searchRecord.dateType" label="0" @input="currentDateType(0)" border>当日</el-radio>
              <el-radio v-model="searchRecord.dateType" label="1" @input="currentDateType(1)" border>当月</el-radio>
              <el-radio v-model="searchRecord.dateType" label="2" @input="currentDateType(2)" border>当年</el-radio>

              <el-date-picker
                  v-model="searchRecord.dateStr"
                  type="date"
                  value-format="yyyy-MM-dd"
                  @change="dateChange"
                  placeholder="选择日期">
              </el-date-picker>

              <el-select v-model="searchRecord.value" @change="selectedValue" style="margin-left: 30px">
                <el-option value="0" label="聊天总数"></el-option>
                <el-option value="1" label="绘画总数"></el-option>
                <el-option value="2" label="新增用户量"></el-option>
                <el-option value="3" label="活跃用户数"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>



    <!--数据表格-->
    <el-row>
      <el-col :span="24">
        <el-card>

          <el-row>
            <el-col :span="24">
              <div id="reportCharts" style="width:100%;height:400px;float:left;background-color: white"></div>
            </el-col>
            <el-col :span="24">


              <el-table
                  v-if="selectedDateNum === 0"
                  :data="tableLogData"
                  style="width: 100%">

                <el-table-column
                    prop="h0"
                    label="0时" sortable>
                </el-table-column>

                <el-table-column
                    prop="h1"
                    label="1时" sortable>
                </el-table-column>

                <el-table-column
                    prop="h2"
                    label="2时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h3"
                    label="3时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h4"
                    label="4时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h5"
                    label="5时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h6"
                    label="6时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h7"
                    label="7时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h8"
                    label="8时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h9"
                    label="9时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h10"
                    label="10时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h11"
                    label="11时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h12"
                    label="12时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h13"
                    label="13时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h14"
                    label="14时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h15"
                    label="15时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h16"
                    label="16时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h17"
                    label="17时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h18"
                    label="18时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h19"
                    label="19时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h20"
                    label="20时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h21"
                    label="21时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h22"
                    label="22时" sortable>
                </el-table-column>
                <el-table-column
                    prop="h23"
                    label="23时" sortable>
                </el-table-column>

              </el-table>


              <el-table
                  v-if="selectedDateNum === 1"
                  :data="tableLogData"
                  style="width: 100%">
                <el-table-column
                    prop="d1"
                    label="1天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d2"
                    label="2天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d3"
                    label="3天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d4"
                    label="4天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d5"
                    label="5天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d6"
                    label="6天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d7"
                    label="7天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d8"
                    label="8天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d9"
                    label="9天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d10"
                    label="10天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d11"
                    label="11天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d12"
                    label="12天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d13"
                    label="13天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d14"
                    label="14天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d15"
                    label="15天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d16"
                    label="16天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d17"
                    label="17天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d18"
                    label="18天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d19"
                    label="19天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d20"
                    label="20天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d21"
                    label="21天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d22"
                    label="22天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d23"
                    label="23天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d24"
                    label="24天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d25"
                    label="25天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d26"
                    label="26天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d27"
                    label="27天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d28"
                    label="28天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d29"
                    label="29天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d30"
                    label="30天" sortable>
                </el-table-column>
                <el-table-column
                    prop="d31"
                    label="31天" sortable>
                </el-table-column>

              </el-table>


              <el-table
                  v-if="selectedDateNum === 2"
                  :data="tableLogData"
                  style="width: 100%">
                <el-table-column
                    prop="m1"
                    label="1月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m2"
                    label="2月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m3"
                    label="3月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m4"
                    label="4月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m5"
                    label="5月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m6"
                    label="6月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m7"
                    label="7月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m8"
                    label="8月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m9"
                    label="9月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m10"
                    label="10月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m11"
                    label="11月" sortable>
                </el-table-column>
                <el-table-column
                    prop="m12"
                    label="12月" sortable>
                </el-table-column>

              </el-table>

            </el-col>
          </el-row>

        </el-card>
      </el-col>
    </el-row>





    <el-dialog
        :title="selectInfoText"
        :visible.sync="selectInfoState"
        width="500px"
    >
      {{currentText}}
    </el-dialog>

    <el-dialog
        title="预览博客"
        :visible.sync="previewBlogState"
        width="1350px"
    >
      <iframe height="500px" width="1300px" frameborder="0" :src="currentIframeUrl" scrolling="auto"></iframe>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      size:5,
      current:1,
      total:0,
      searchRecord:{
        dateType:'0',
        dateStr:'',
        value:'0',
      },
      tableLogData:[],
      selectInfoText:'',
      selectInfoState:false,
      currentText:'',
      previewBlogState:false,
      currentIframeUrl:'',
      unitData:['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时',
        '13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时'],
      currentData:[],
      selectedDateNum:0,
    }
  },
  created() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    month = (month > 9) ? month : ("0" + month);
    day = (day < 10) ? ("0" + day) : day;
    this.searchRecord.dateStr = year + "-" + month + "-" + day
  },
  mounted() {
    this.initCharts()
  },
  methods:{
    selectedValue(){
      this.initCharts()
    },
    dateChange(){
      this.initCharts()
    },
    currentDateType(num){
      if (num === 0){
        this.selectedDateNum = num
        this.unitData = ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时',
          '13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时']
      }else if (num === 1){
        this.selectedDateNum = num
        this.unitData = ['1天', '2天', '3天', '4天', '5天', '6天', '7天', '8天', '9天', '10天', '11天', '12天', '13天', '14天', '15天', '16天', '17天', '18天', '19天', '20天', '21天', '22天', '23天', '24天', '25天', '26天', '27天', '28天', '29天', '30天', '31天']
      }else {
        this.selectedDateNum = num
        this.unitData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      }
      this.initCharts();
    },

    initCharts(){
      this.$http.get('/admin/report/query',{
        params:{
          dateType:this.searchRecord.dateType,
          dateStr:this.searchRecord.dateStr,
          value:this.searchRecord.value
        }
      }).then(res =>{
        if (this.selectedDateNum === 0){
          this.tableLogData = res.data.data.hourVos
        }else if(this.selectedDateNum === 1){
          this.tableLogData = res.data.data.dayVos
        }else {
          this.tableLogData = res.data.data.monthVos
        }
        this.$echarts.init(document.getElementById('reportCharts')).setOption(
            {
              xAxis: {
                type: 'category',
                data: this.unitData
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  label: {
                    show: true,
                    position: 'inside'
                  },
                  data: res.data.data.data,
                  color:['#00aaff'],
                  type: 'bar',
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                  }
                }
              ]
            }
        )
      })

    },
  }
}
</script>

<style >
.page-row{
  margin-top: 20px;
  text-align: center;
}
</style>
